<template>
	<div>
		<router-link class="btn btn-success" to="/crud/new">添加学生</router-link>
		<div class="table-responsive">
		    <table class="table table-striped">
		        <thead>
		            <tr>
		                <th>#</th>
		                <th>姓名</th>
		                <th>年龄</th>
		                <th>操作</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr v-for="item in list" :key="item.id">
		                <td>{{ item.id }}</td>
		                <td>{{ item.name }}</td>
		                <td>{{ item.age }}</td>
		                <td><router-link :to="`/crud/update?id=${item.id}`" class="btn">编辑</router-link><a @click.prevent="deleteById(item.id)" href="#/" class="btn">删除</a></td>
		            </tr>
		        </tbody>
		    </table>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data () {
		return {
			list : [
				{ "id" : 1, "name" : "张三", "age" : 19}
			]
		}
	},
	async created () {
		this.loadList()
	},
	methods : {
		async loadList () {
			const res = await axios.get('http://localhost:3000/list')
			this.list = res.data
		},
		// 1.绑定注册删除事件处理函数
		// 2.发起请求删除数据
		// 3.根据响应结果处理
		async deleteById (id) {
			if ( ! window.confirm('确定要删除吗？')) {
				return
			}
			await axios.delete(`http://localhost:3000/list/${id}`)
			this.loadList()
		}
	}
}
</script>

<style>
	
</style>
